<template>
  <div class="data-list">
    <DataLoadMoreList :dataSource="datasource"
                      @loadDate="loadDataList"
                      :loading="loadingData"
    >
      <template #default="{data}">
        <VideoItem :data="data"></VideoItem>
      </template>
    </DataLoadMoreList>
  </div>
</template>
<script setup>
import {getCurrentInstance, onMounted, ref, watch} from "vue";
import {useRoute, useRouter} from "vue-router";
import {mitter} from "@/eventbus/eventBus.js";
import {ImgURL} from "@/utils/Request.js";
import VideoItem from "@/components/VideoItem.vue";
import video_loadVideo from "@/data/video_loadVideo.json";
import video_null from "@/data/video_null.json";

const {proxy} = getCurrentInstance();
const route = useRoute();
const router = useRouter();
const props = defineProps({
  categoryIdInfo:{
    type: Object,
    default: () => {
      return {}
    }
  },
  categoryId: {
    type: Number,
    default: 0
  }
});
let aop = 0
const datasource = ref([]);
const loadingData = ref(false);
const loadDataList = async () => {
  if(aop <= datasource.value.pageTotal && props.categoryId == 1 || aop === 0 && props.categoryId == 1){
    loadingData.value = true;
    const params = {
      pageNo: 0,
      pCategoryId: props.categoryIdInfo.pCategoryId ? props.categoryIdInfo.pCategoryId : 0,
      categoryId: props.categoryIdInfo.categoryId ? props.categoryIdInfo.categoryId : 0
    }
    if(aop > 0){
      params.pageNo = aop;
    }
    const res = params.pCategoryId === 19 && params.categoryId === 0 || params.pCategoryId === 0?video_loadVideo:video_null;
    if(params.pageNo > 0){
      datasource.value.list = [...datasource.value.list, ...res.data.list];
    }else{
      datasource.value = res.data;
    }
    loadingData.value = false;
    aop+=1
  }else{
    datasource.value.pageNo = datasource.value.pageTotal;
  }
};
watch(() => props.categoryIdInfo, () => {
  aop = 0;
  loadDataList();
});
onMounted(() => {
  loadDataList()
});
</script>
<style scoped lang="scss">

</style>